import React, { Component } from "react";

/*
  解决this指向的问题

  1. 内联的使用bind(this)
      不推荐的，每次使用的时候，都会产生一个新函数，看似一样的，但是它们指向了不同的内存，导致内存占用太高

  2. 在constructor里面使用 this.xxx = this.xxx.bind(this);
      比较推荐的，它不会一直产生新函数，将新函数用变量存下来了
      写起来比较麻烦

  3. 使用箭头函数
      将this指向指向了外层
      既不会增加内存，也写的简单
      推荐
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 10,
    };
    // this.fn = this.fn.bind(this);
  }

  // fn() {
  //   console.log(this.state.count);
  // }

  fn = () => {
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h2>事件处理</h2>
        {/* 函数的括号不能随便加，加了以后就会自动执行 */}
        {/* 函数会有一个默认参数，是event对象 */}
        {/* <button onClick={this.fn.bind(this)}>btn</button> */}
        {/* <button onClick={this.fn}>btn</button> */}
        <button onClick={this.fn}>btn</button>
      </>
    );
  }
}

export default App;
